import React from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router';
import { Carousel, Layout, Modal } from 'antd';
import styles from './style.css';
import { getCategory } from '../../actions/categoryAction';
import { getHotArticle } from '../../actions/articleAction';
import { getAll as getCarousel } from '../../actions/carouselAction';
import { getProtocol, hideModal, reject } from '../../actions/homeAction';
import Menus from './menus';
import 'rc-menu/assets/index.css';
import moment from 'moment-mini';
const { Header, Content, Footer } = Layout;

import zhaoshang from '../../images/zhaoshang.png';
import kaiyuan from '../../images/kaiyuan.png';
import yintai from '../../images/yintai.png';
import guotai from '../../images/guotai.png';

@connect(state => ({
  category: state.admin.category,
  carousel: state.admin.carousel,
  article: state.admin.article,
  protocol: state.home.protocol,
  modal: state.home.modal,
}), { getCategory, getCarousel, getHotArticle, getProtocol, hideModal, reject, })
export default class extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      current: 'mail',
    }
  }

  componentDidMount() {
    document.title = '﻿中正（深圳）投资有限公司';
    this.props.getCategory();
    this.props.getCarousel();
    this.props.getHotArticle();
    this.props.getProtocol();
  }

  render() {
    const { category, carousel, article, protocol, modal, hideModal, reject, } = this.props;
    return (
      <Layout>
        <Header style={{
          background: '#920003',
          width: '100%',
          height: '90px',
          lineHeight: '90px',
          margin: '0 auto'
        }}>
          <div className={styles.center1200}>
            <Link to={`/`} className={styles.logo}></Link>
            <Menus list={category.list} />
          </div>
        </Header>
        <Content className={styles.center1200} style={{ display: 'unset' }}>
          <Carousel autoplay className={styles.slider}>
            {
              carousel.map((item, index) =>
                <div key={`slider-${index}`}>
                  <img src={item.url} style={{ width: '100%', height: '100%' }} />
                </div>
              )
            }
            </Carousel>
          {
            article.hot.length > 0
              ?
              <div style={{ display: 'flex', margin: '24px 0 0' }}>
                <div className={styles.column}>
                  <div className={styles.columnTitle}>{article.hot[0].name}</div>
                  <ul className={styles.columnUl}>
                    {
                      article.hot[0].list.map((cell, index) =>
                        <li className={styles.columnLi} key={`article-${cell.id}`}>
                          <Link to={`/article?cid=${cell.cid}&id=${cell.id}`} className={styles.columnLink}>
                            {cell.title}
                          </Link>
                          <div className={styles.linkDate}>{moment(+cell.create_time).format('YYYY-MM-DD')}</div>
                        </li>
                      )
                    }
                  </ul>
                </div>
                <div style={{ width: '30px' }}></div>
                <div className={styles.column}>
                  <div className={styles.columnTitle}>{article.hot[1].name}</div>
                  <ul className={styles.columnUl}>
                    {
                      article.hot[1].list.map((cell, index) =>
                        <li className={styles.columnLi} key={`article-${cell.id}`}>
                          <Link to={`/article?cid=${cell.cid}&id=${cell.id}`} className={styles.columnLink}>
                            {cell.title}
                          </Link>
                          <div className={styles.linkDate}>{moment(+cell.create_time).format('YYYY-MM-DD')}</div>
                        </li>
                      )
                    }
                  </ul>
                </div>
                <div style={{ width: '30px' }}></div>
                <div className={styles.column}>
                  <div className={styles.columnTitle}>{article.hot[2].name}</div>
                  <ul className={styles.columnUl}>
                    {
                      article.hot[2].list.map((cell, index) =>
                        <li className={styles.columnLi} key={`article-${cell.id}`}>
                          <Link to={`/article?cid=${cell.cid}&id=${cell.id}`} className={styles.columnLink}>
                            {cell.title}
                          </Link>
                          <div className={styles.linkDate}>{moment(+cell.create_time).format('YYYY-MM-DD')}</div>
                        </li>
                      )
                    }
                  </ul>
                </div>
              </div>
              : null
          }
        </Content>
        <div className={styles.center1200} style={{margin: '30px auto 0', fontSize: '18px', display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
        <span style={{margin: '0 50px 0 0'}}>合作机构</span>
        <img width="130" height="40"  style={{margin: '0 50px 0 0'}} src={zhaoshang} />
        <img width="130" height="40" style={{margin: '0 50px 0 0'}} src={kaiyuan} />
        <img width="130" height="40" style={{margin: '0 50px 0 0'}} src={yintai} />
        <img width="130" height="40" style={{margin: '0 50px 0 0'}} src={guotai} />
        </div>
        <Footer className={styles.footer}>
          <a href="http://www.miitbeian.gov.cn/" target="_blank" className={styles.footerLink}>粤ICP备18013179号</a>
          <span style={{ color: '#999', fontSize: '12px', margin: '0 0 0 10px' }}>All Rights Reserved ©2017</span>
          <Link to="/login?type=0" style={{ margin: '0 0 0 10px', fontSize: '12px', color: '#999' }}>管理员登录</Link>
        </Footer>
        <Modal
          title="投资者风险揭示"
          visible={modal}
          closable={false}
          width={666}
          okText="接受"
          cancelText="放弃"
          onOk={hideModal}
          onCancel={reject}
        >
          <div style={{ maxHeight: '450px', overflowY: 'scroll' }} dangerouslySetInnerHTML={{ __html: protocol }}></div>
        </Modal>
      </Layout>
    );
  }
}
